<template>
	<div class="newslist">
		<van-swipe :autoplay="0" :show-indicators="false">
			<van-swipe-item v-for="(item,index) in limitImg" :key="index" @click="todetail(item)">
				<img :src="item.coverimages" alt="">
				<p class="footer-line">
					<b class="van-ellipsis">{{item.title}}</b>
					<span></span>
				</p>
			</van-swipe-item>
		</van-swipe>
		
		<div class="list">
			<div class="list-item" v-for="(item,i) in limitList" :key="i" @click="todetail(item)">
				<span class="dian"></span>
				<span class="van-ellipsis">{{item.title}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import news from "@/assets/img/lianghui.png"
	export default {
		name: "newslist",
		components: {

		},
		data() {
			return {
				list:[]
			}
		},
		computed:{
			limitImg: function(){
				return this.list.slice(0,3)
			},
			limitList: function(){
				return this.list.slice(3)
			},
		},
		mounted() {
			
		},
		methods:{
			getList(item){
				this.$api.home.articleList({category_id:item.id,limit:10,page:1}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data.data
					}
				
				})
			},
			todetail(item){
				this.$router.push({name:'articledetail',query:{id:item.id}})
			},
		}


	}
</script>

<style scoped lang="less">
	.newslist {
		width: 95%;
		// height:8.56rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0rem 0rem 0rem rgba(206, 206, 206, 0.29);
		border-radius: 0.2rem;
		margin: 0.5rem auto;
		padding: 0.47rem 0.41rem;
		padding-bottom: 1.5rem;
		.list{
			.list-item{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 0.88rem;
				.dian{
					width:0.28rem;
					height:0.28rem;
					background:rgba(131,131,131,1);
					border-radius:50%;
					display: inline-block;
					margin: 0 0.5rem;
				}
				.van-ellipsis{
					flex: 1;
					text-align: left;
					font-size:0.75rem;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(95,95,95,1);
				}
				
			}.active{
				.dian{
					
					background:#FE7700;
				
				}
				.van-ellipsis{
				
					color:#FE7700;
				}
			}
		}
	}
</style>
<style lang="less">
	.newslist .van-swipe {
		height: 8.5rem;

		img {
			width: 100%;
		}

		.van-swipe-item {
			position: relative;

			.footer-line {
				position: absolute;
				bottom: 0;
				width: 100%;
				color: #fff;
				left: 0;
				right: 0;
				height: 1.94rem;
				justify-content: flex-start;
				align-items: center;
				display: inline-flex;

				span {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 1);
					opacity: 0.65;
					z-index: 0;

				}

				b {
					z-index: 1;
					padding-left: 0.5rem;
				}
			}
		}
		

	}
</style>
